<template>
    <div class="Content">
        <template v-if="ActiveConfig">
            <div class="MenuTitle" :style="TitleStyle">
                <template v-for="item in ActiveTitle">
                    <div class="MenuItem" v-if="item.show" :class="{
                        Active: Active == item.title
                    }" :style="{
                        color: Active == item.title ? token.colorPrimary : '',
                        borderColor: token.colorBorderSecondary,
                        backgroundColor: Active != item.title ? token.colorFillAlter : '',
                    }" @click="() => { Active = item.title }">{{ item.title }}</div>
                </template>
            </div>

            <div class="MenuContent">
                <Options v-if="Active == '属性'" />
                <Styles v-if="Active == '样式'" />
                <Advanced v-if="Active == '高级'" />
            </div>
        </template>
        <template v-else>
            <div class="Empty">请选择原件</div>
        </template>
    </div>
</template>
<script setup>
import { computed, inject, watch, ref } from 'vue';
import { theme } from 'ant-design-vue';
import Styles from '../Component/Styles/index.vue';
import Advanced from '../Component/Advanced/index.vue';
import Options from '../Component/Options/index.vue';
const { token } = theme.useToken();
const StateEvent = inject('StateEvent');
const Active = ref('');

const TitleStyle = computed(() => {
    return {
        color: token.value.colorTextSecondary,
        borderBottom: '1px solid ' + token.value.colorBorderSecondary,
    }
});
const ActiveTitle = computed(() => {
    if (StateEvent.ActiveId.value) {
        const Rule = StateEvent.GetRuleById(StateEvent.ActiveId.value);
        return {
            HaveOptions: { title: '属性', show: !!Rule.props },
            HaveStyle: { title: '样式', show: !!Rule.style, },
            HaveEvents: { title: '高级', show: !!Rule.events, },
        }
    } else {
        return {}
    }
});

const ActiveConfig = computed(() => {
    if (StateEvent.ActiveId.value) {
        return StateEvent.GetRuleById(StateEvent.ActiveId.value)
    } else {
        return null
    };
})

watch(ActiveConfig, () => {
    if (!Active.value) {
        Active.value = '样式';
    }
}, { deep: true })




</script>
<style scoped lang="less">
.Content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;

    .MenuTitle {
        position: relative;
        width: 100%;
        height: 40px;
        line-height: 40px;
        display: flex;
        justify-content: space-between;
        user-select: none;
    }

    .MenuItem {
        text-align: center;
        width: 100%;
        height: 41px;
        border-left: 1px solid #000;

        &:first-child {
            border-left: none;
        }
    }

    .MenuItem.Active {
        background-color: #fff;
    }

    .MenuContent {
        position: absolute;
        position: absolute;
        top: 40px;
        bottom: 8px;
        left: 0;
        right: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .Empty {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
}
</style>